<template>
    <div class="Items">
        <Header :zIndex="0" ref="Header"></Header>
        <div class="content-wrap">
            <center id="app" class="clearfix">
                <div class="top">
                    <ul class="daohang_list">
                        <li><router-link class="list_item" :to="{ path: '/Create' }">创建活动</router-link></li>
                        <li><router-link class="list_item on" :to="{ path: '/Manage' }">投票管理</router-link></li>
                        <li><router-link class="list_item" :to="{ path: '/Level' }">账户升级</router-link></li>
                        <li><router-link class="list_item" :to="{ path: '/Userinfo' }">个人中心</router-link></li>
                        <li><router-link class="list_item" :to="{ path: '/Invate' }">推荐有奖</router-link></li>
                    </ul>
                </div>
                <!-- 评论管理 -->
                <div class="right"> 
                    <div class="rank clearfix">
                        <el-form :inline="true">
                            <el-form-item label="状态">
                                <el-select v-model="state" placeholder="请选择审核状态">
                                    <el-option label="所有" :value="0"></el-option>
                                    <el-option label="未审核" :value="1"></el-option>
                                    <el-option label="已审核" :value="2"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" icon="el-icon-search" @click="onSearch">查询</el-button>
                            </el-form-item>
                        </el-form>
                    </div>
                    <el-table :data="itemList" style="margin: 10px 0;font-size:14px">
                      <el-table-column label="用户" width="140px">
                          <template slot-scope="scope">
                              <div class="face">
                                  <img :src="scope.row.face" />
                                  <p>{{scope.row.nickName}}</p>
                              </div>
                          </template>
                      </el-table-column>
                      <el-table-column label="评论内容" prop="content"></el-table-column>
                      <el-table-column label="评论时间" width="180">
                          <template slot-scope="scope">
                              {{formatDate(scope.row.addtime)}}
                          </template>
                      </el-table-column>
                      <el-table-column label="状态" width="100">
                          <template slot-scope="scope">
                              <el-tag effect="dark" v-if="scope.row.state>0">已审核</el-tag>
                              <el-tag type="danger" effect="dark" v-if="scope.row.state==0">未审核</el-tag>
                          </template>
                      </el-table-column>
                      <el-table-column label="操作" width="100">
                          <template slot-scope="scope">
                              <div class="btns">
                                <div><el-button type="primary" v-if="scope.row.state==0" icon="el-icon-success" @click="checkReply(scope.row.id)">审核</el-button></div>
                                <div><el-button type="danger"  icon="el-icon-delete" @click="delReply(scope.row.id)">删除</el-button></div>
                              </div>
                          </template>
                      </el-table-column>
                    </el-table>
                    <el-pagination
                        background
                        layout="prev, pager, next"
                        @current-change="handleCurrentChange"
                        :current-page="currentPage"
                        :page-size="pageSize"
                        :total="recordCount"
                        v-if="itemList.length > 0">
                    </el-pagination>
                </div>
            </center>
        </div>
        <Footer></Footer>
    </div>
</template>
<script>
import { Toast } from 'vant'
import User from '../../utils/user'
import Ajax from '../../utils/ajax'
import Footer from '../components/Footer.vue'
import Header from '../components/Header.vue'

export default {
    name: 'Reply',
    components: {
        Header,
        Footer
    },
    data(){
        return {
            itemList:[],
            recordCount: 0,
            pageSize: 20,
            currentPage: 1,
            state: 0,
            code: 0,
            player: 0
        }
    },
    created(){
        if(this.$route && this.$route.query) {
            if(this.$route.query.code) {
                this.code = this.$route.query.code;
            } else {
                this.$router.back(-1);
            }
            if(this.$route.query.player){
                this.player = this.$route.query.player;
            } else {
                this.$router.back(-1);
            }
        }
        this.loadData();
    },
    methods:{
        handleCurrentChange(p){
            this.currentPage = p;
            this.loadData();
        },
        onSearch(){
            this.currentPage = 1;
            this.loadData();
        },
        loadData(){
            Ajax.get('activity/player/reply/' + this.code + '/' + this.player, {
                page: this.currentPage,
                size: this.pageSize,
                state: this.state
            }).then(res=>{
                if(res.code == 0){
                    this.itemList = res.data.data;
                    this.recordCount = res.data.recordCount;
                } else {
                    this.$alert(res.msg);
                }
            }).catch(err=>{
                console.error(err);
                this.$alert('获取数据失败');
            })
        },
        delReply(id){
            if(!id || isNaN(id)) return;
            this.$confirm('确定要删除此评论吗？', '确认', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                Ajax.delete('activity/player/reply/' + this.code + '/' + id).then(res=>{
                    if(res.code == 0) {
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                        this.loadData();
                    } else {
                        this.$message({
                            type: 'info',
                            message: res.msg
                        });
                    }
                }).catch(err=>{
                    console.error(err);
                    this.$alert('删除失败');
                })
            })
        },
        checkReply(id) {
            if(!id || isNaN(id)) return;
            Ajax.get('activity/player/reply/check/' + this.code + '/' + id, {
                state:1
            }).then(res=>{
                if(res.code == 0){
                    this.$alert('审核成功');
                    this.loadData();
                } else {
                    this.$alert(res.msg);
                }
            }).catch(err=>{
                this.$alert('审核失败');
                console.error(err);
            })
        }
    }
}
</script>
<style scoped>
.face {
    display:flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-content: center;
    align-items: flex-start;
    justify-content: flex-start;
}
.face img {
    width:64px;
    height:64px;
    border-radius: 50%;
    margin-bottom: 10px;
}
.btns {
    display:flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-content: center;
    align-items: center;
    justify-content: center;
}
.btns div:nth-child(2) {
    margin-top:5px;
}
.el-form-item {
    margin-bottom:0 !important;
}
</style>
<style src="@/assets/css/items.css"  scoped></style>